<template>
  <div class='container'>
    <el-dialog :title="textTitle" :visible="showDialog" @close="btnCancel" >
      <el-form :model="articlesData" label-width="120px" :rules="rules" ref="articlesForm">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="articlesData.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <quill-editor  v-model="articlesData.articleBody" class="myQuillEditor" :options="editorOption" />
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input v-model="articlesData.videoURL"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="btnCancel">取 消</el-button>
          <el-button type="primary" size="small" @click="btnOK">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { detail, update, add } from '@/api/hmmm/articles'
export default {
  // 组件名称
  name: '',
  // 局部注册的组件
  components: {
    quillEditor
  },
  // 组件参数 接收来自父组件的数据
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    node: {
      type: [String, Number],
      default: null
    }
  },
  // 组件状态值
  data () {
    return {
      content: '',
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ align: [] }], // 对齐方式
            ['image', 'video'] // 上传图片、上传视频
          ]
        }
      },
      articlesData: {
        title: '', // 文章标题
        articleBody: '', // 文章内容
        videoURL: '', // 视频地址
        id: '' // 文章id
      },
      rules: {
        title: [
          { required: true, message: '文章标题不能为空', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '文章标题不能为空', trigger: 'blur' }
        ]

      }

    }
  },
  // 计算属性
  computed: {
    textTitle () {
      return this.articlesData.id ? '修改文章' : '新增文章'
    }
  },
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    // this.detail()
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () {},
  // 组件方法
  methods: {
    async detail (id) {
      const { data } = await detail({ id: id })
      this.articlesData = data
      // console.log(this.articlesData)
    },
    // 确定
    async btnOK () {
      try {
        if (this.articlesData.id) {
          // 修改
          await update(this.articlesData)
          // alert('修改')
        } else { // 新增
          await this.$refs.articlesForm.validate()
          await add(this.articlesData)
          // alert('新增')
        }
        this.$message.success('操作成功')
        // this.$parent.getList()
        this.$emit('change')
        this.$emit('update:showDialog', false)
      } catch (error) {
        console.log(error)
      }
    },
    btnCancel () {
      this.articlesData = {
        title: '', // 文章标题
        articleBody: '', // 文章内容
        videoURL: '' // 视频地址
      }
      this.$refs.articlesForm.resetFields()
      this.$emit('update:showDialog', false)
    }

  }
}
</script>

<style scoped lang="scss" >
 ::v-deep.myQuillEditor>.ql-container.ql-snow {
    height: 200px!important;
    border: 1px solid #ccc;
}
</style>
